<template>
	<orh-table reload @on-reload="refresh" pages :pageDate="pageDate" @on-page-change="queryData">
		<Row slot="option">
			<Col span="3">
            <Button type="primary"  @click="modalfun('start')" :loading="butloading" size="small">按起止时间导出</Button>
            </Col>
			<Col span="3">
			<Button type="primary" @click="modalfun('month')" :loading="butloading" size="small" v-button="'daochu'">按月份导出</Button>
			</Col>
			<Col span="3">
			<Button type="primary" @click="modalfun('semester')" :loading="butloading" size="small" v-button="'daochu'">按学期导出</Button>
			</Col>
		</Row>

		<Table :data="datalist" :columns="columns1" slot="table" :loading="tableload"></Table>
		<Modal v-model="modalall" title="请选择导出信息" slot="others">
			<Form ref="formItemAll" :model="formItemAll" :label-width="80" :rules="ruleValidateAll">
				<FormItem label="人员" prop="user_id">
					<Select v-model="formItemAll.user_id" filterable>
						<Option v-for="item in peopleList" :value="item.user_id" :key="item.user_id">{{ item.teacher_name.zh?item.teacher_name.zh:item.teacher_name.mn}}</Option>
					</Select>
				</FormItem>
				<FormItem label="日期" prop="month" v-if="daochutype=='month'">
					<DatePicker type="month" size="small" @on-change="searchfun" placeholder="请选择日期" style="width: 200px"></DatePicker>
				</FormItem>
				<FormItem label="起止日期" prop="month" v-if="daochutype=='start'">
					<DatePicker  v-model="startend" type="daterange" placement="bottom-end" @on-change="searchfun" placeholder="请选择起止日期" style="width: 200px"></DatePicker>
				</FormItem>
				<FormItem label="学期" prop="semester_id" v-if="daochutype=='semester'">
					<semester-change :modeltrue="false" @on-select="searchfun" style="width: 230px;"></semester-change>
				</FormItem>
				<FormItem>
					<a href="" style="color:red;font-size: 12px;">已确保您的浏览器已信任本网页</a>
				</FormItem>
				<FormItem>
					<Button type="primary" :loading="butloading" @click="handleSubmitAll('formItemAll')">提交</Button>
				</FormItem>
				<div style="clear:both"></div>
			</Form>
			<div slot="footer"></div>
		</Modal>
		<orh-sidebar v-model="isShow" :title="titles" cover slot="others">
			<detail v-if="isShow" :userid="userid"></detail>
		</orh-sidebar>
	</orh-table>
</template>

<script>
	export default {
		name: "teacher-groupattendancedata",
		components: {
			Detail: resolve => {
				require(['./Detail.vue'], resolve);
			},
			SemesterChange: resolve => require(['&/Authpub/semesterchange.vue'], resolve)
		},
		data() {
			return {
				datalist: [],
				tableload: false,
				peopleList: [],
				startend :[],
				userid: null,
				titles: '',
				isShow: false,
				pageDate: {
					total: 0,
					current_page: 1,
					per_page: 10
				},

				butloading: false,
				modal_loading: false,
				modalall: false,

				columns1: [{
						title: '姓名',
						render: (h, params) => {
							let name = params.row.teacher_name.zh ? params.row.teacher_name.zh : params.row.teacher_name.mn
							return h('div', name)
						},

					},
					{
						title: '编号',
						key: 'idcard'
					},

					{
						title: '操作',
						key: 'operation',
						width: 80,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									style: {
										marginRight: '5px',
									},
									on: {
										click: () => {
											this.detail(params.row.user_id)
										}
									}
								}, '查看'),

							]);
						}
					}
				],

				daochutype: null,
				formItemAll: {
					user_id: null,
					month: '',
					semester_id: '',
					start_at: '',
          			end_at: '',
				},
				ruleValidateAll: {
					user_id: [{
						type: 'number',
						required: true,
						message: '请选择人员',
						trigger: 'change'
					}],
				},
			}
		},
		methods: {
			// =====导出  开始======
			modalfun(type) {
				this.daochutype = type
				if (this.daochutype == 'month') {
					this.formItemAll.semester_id = ''
				}
				if (this.daochutype == 'semester') {
					this.formItemAll.month = ''
				}

				this.modalall = true
			},
			handleSubmitAll(name) {
				let str = ''
				if (this.daochutype == 'month') {
					str = this.formItemAll.month
				}
				if (this.daochutype == 'semester') {
					str = this.formItemAll.semester_id
				}
				if (this.daochutype == 'start') {
                    str = this.formItemAll.start_at

                }
				if (str == '') {
					this.$Message.warning('请选择日期');
					return
				} else {
					this.butloading = true
					this.$refs[name].validate((valid) => {
						if (valid) {
							this.$http.get('api/teacher/v1/Entrance/exportExcel', {
								params: this.formItemAll
							}).then(val => {
								this.butloading = false
								this.modalall = false
								window.open(val.data.url)
							}).catch(err => {
								if (err.code && err.code == 422) {
									this.$Message.error(err.message);
								}
								this.butloading = false
							})
						} else {
							this.butloading = false
							this.$Message.error('表单验证失败!');
						}
					})
				}
			},
			// 关键字搜索
			searchfun(val) {
				if (this.daochutype == 'month') {
					this.formItemAll.month = val
				}
				if (this.daochutype == 'semester') {
					this.formItemAll.semester_id = val
				}
				if (this.daochutype == 'start') {
                    this.formItemAll.start_at = val[0]
                    this.formItemAll.end_at = val[1]
                }
			},
			// =====导出  结束======

			/************************************************************
			 *
			 * 请求列表数据
			 *
			 ************************************************************/
			queryData(index = 1) {
				this.tableload = true
				this.$http.get(`api/teacher/v1/get/teacher/attendancedatas?page=${index}`).then(val => {

					this.datalist = val.data.data;
					if (val.pages) {
						this.pageDate.per_page = val.data.per_page;
						this.pageDate.total = val.data.total;
						this.pageDate.current_page = val.data.current_page;
					}
					this.tableload = false
				}).catch(err => {
					if (err.code && err.code == 422) {
						this.$Message.error(err.message);
					}
					this.tableload = false //加载完数据动画结束
				})
			},

			/************************************************************
			 *
			 * 查看详情
			 *
			 ************************************************************/
			detail(index) {
				this.isShow = true;
				this.titles = '详情';
				this.userid = index;
			},

			/************************************************************
			 *
			 * 刷新
			 *
			 ************************************************************/
			refresh() {
				this.queryData(this.pageDate.current_page)
			},

			/************************************************************
			 *
			 * 获取人员信息
			 *
			 ************************************************************/
			peoplefun() {
				this.$http.get('api/teacher/v1/Entrance/teacherExceltont').then(val => {
					this.peopleList = val.data
				}).catch(err => {
					if (err.code && err.code == 422) {
						this.$Message.error(err.message);
					}
				})
			},
		},
		mounted() {
			this.peoplefun()
			this.queryData()
		}
	}
</script>




